<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('countries.title')}} 
            </h2>
            <cly-tooltip-icon :tooltip="description" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
            </span>
        </template>
		<template v-slot:header-right>
          <cly-more-options v-if="topDropdown" size="small">
            <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
			  <!--<span :class="item.icon"></span>-->
              <a :href="item.value" class="bu-ml-1">{{item.label}}</a>
            </el-dropdown-item>
          </cly-more-options>
        </template>
    </cly-header>
    <cly-main >
		<cly-date-picker-g class="geo-date-picker-container" ref="datePicker"></cly-date-picker-g>
		<cly-section class="geo-analytics-data geo-countries-section">
			<div class="bu-columns bu-is-gapless" style="height: 534px;">
				<div style="width:256px;">
					<cly-radio-block v-bind:items="chooseProperties" v-model="selectedProperty"></cly-radio-block>
				</div>
				<div class="bu-column leaflet-noclick-map" style="position:relative">
					<cly-worldmap
                        style="height: 100%;"
						external-country=""
						external-detail-mode="world"
						:value-type="selectedPropertyTitle"
						:show-detail-mode-select="false"
						:show-navigation="false"
						:prevent-going-to-country="true"
                        :preventLayerClick="true"
						:countries-data="countriesData"
						@country-click="regionClick"
						>
					</cly-worldmap>
					<div style="position: absolute; top: 20px; left:20px; z-index: 400;">
						<a ref="toCityViewLink" class="cly-vue-button button-light-skin ToLink" :href="buttonLink">{{buttonText}}</a>
					</div>
				</div>
			</div>
		</cly-section>
		<cly-section>
			<cly-datatable-n  :rows="countryTable" :resizable="true" :force-loading="isLoading">
				<template v-slot="scope">
					<el-table-column sortable="custom" prop="countryTranslated" :label="i18n('countries.table.country')">
						<template slot-scope="scope">
								<div class="bu-level-left">
									<div class="bu-level-item slipping-away-users-table-data-item">
										<img :src='scope.row.flag' />
										<span class="bu-pl-4">{{scope.row.countryTranslated}}</span>
									</div>
								</div>
							</template>
					</el-table-column>
					<el-table-column sortable="custom" prop="t" :label="i18n('common.table.total-sessions')">
						<template slot-scope="scope">
							{{formatNumber(scope.row.t)}}
						</template>
					</el-table-column>
					<el-table-column sortable="custom" prop="u" :label="i18n('common.table.total-users')">
						<template slot-scope="scope">
							{{formatNumber(scope.row.u)}}
						</template>
					</el-table-column>
					<el-table-column sortable="custom" prop="n" :label="i18n('common.table.new-users')">
						<template slot-scope="scope">
							{{formatNumber(scope.row.n)}}
						</template>
					</el-table-column>
				</template>
			</cly-datatable-n>
		</cly-section>
	</cly-main>
</div>